<template>
<!--  练习室-->
  <el-col>
    <el-card>
      <div class="box">
        <div style="display: flex;float: left ">
          <div class="left-span active">  全部</div>
          <div class="left-span">我创建的</div>
          <div class="left-span">我加入的</div>
          <div class="left-span">我课程的</div>
        </div>

        <div class="box1">
          创建
        </div>
      </div>
    </el-card>
  </el-col>

  <div >
    <el-card class="button">
     <div class="right-1">
       <div class="el-div"><img src="/6ee6f52a880511ebb6edd017c2d2eca2.jpg" alt=""> </div>
       <div class="el-div-div">
         <span>自行车</span>
         <p>以练习0次0分钟</p>
         <div class="run"> <el-icon><Clock /></el-icon>未开始</div>
       </div>
     </div>
    </el-card>
  </div>
  <el-empty description="description" />
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "index",
});
</script>

<script setup lang="ts">
import {reqHistoryList} from '@/api/trainingRoom/index'
import {onMounted} from "vue";

const getHistoryList = async () => {
  const res = await reqHistoryList(1, 4)
  console.log(res)
}
onMounted(() => {
  getHistoryList()
})

</script>

<style lang="scss" scoped>

.box {
  text-align: center;
  height: 50px;

}

.box1 {
  float: right;
  background-color: #f93684;
  padding: 10px;
  width: 80px;
  border-radius: 520px;

}

.left-span {
  display: flex;
  padding: 10px;
}

.active {
  background-color: #f93684;
  color: white;
  border-radius: 5px;
}


.button{
  margin-top: 10px;
  height: 600px;

}
.right-1{
  //background-color: #409EFF;
  font-size: 15px;
  height: 200px;
  .el-div{
    margin-top: 50px;
    height: 180px;
    width: 180px;
    float: left;
    .el-div-div{

    }
  }
}
span{
  font-weight:700;
  padding-top: 25px;
  font-size: 20px;
  height: 50px;
  flood-color: #001528;
  line-height: 50px;
  display: block;
  margin-bottom: 50px;
}
.run{
  display: flex;
  float: right;
}
</style>
